<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_1">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-s-custom"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">访客数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.visitor_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.visitor_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_2">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-user"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">激活成功客户数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.activate_success_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.activate_success_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_3">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-warning-outline"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">激活异常数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.activate_exception_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.activate_exception_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_4">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-folder-delete"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">激活失败数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.activate_failed_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.activate_failed_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_5">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-guide"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">引导留评数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.guide_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.guide_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_3">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-finished"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">留好评数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.activate_favorable_comment_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.activate_favorable_comment_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_4">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-circle-close"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">中差评数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.activate_bad_reviews_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.activate_bad_reviews_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_1">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-circle-check"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">完成流程数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.flow_path_complete_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.flow_path_complete_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :md="6" :sm="12">
      <el-card shadow="never" class="monitor-count-card card_3">
        <div>
          <div style="float: left">
            <el-tag size="large" class="ele-tag-round">
              <i class="el-icon-mobile"></i>
            </el-tag>
          </div>
          <div style="float: right">
            <div class="databoard-number-of-visitors">注册数</div>
            <div class="monitor-count-card-num">今日数:{{tabData.register_num_now}}</div>
            <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.register_num_all}}</div>
          </div>
        </div>
      </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_4">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-tickets"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">订单数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.order_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.order_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_1">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-message"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">发送成功邮件数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.email_send_success_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.email_send_success_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card card_5">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-message"></i>
              </el-tag>
            </div>
            <div style="float: right">
              <div class="databoard-number-of-visitors">发送失败邮件数</div>
              <div class="monitor-count-card-num">今日数:{{tabData.email_send_failed_count_now}}</div>
              <div class="monitor-count-card-text ele-text-secondary">总数:{{tabData.email_send_failed_count_all}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>



    <!-- 用户分布、浏览器分布 -->
<!--    <div class="script_text">-->
<!--      <div class="explain" ><i slot="reference" class="el-icon-warning" style="color: rgba(255, 140, 0, 1)"></i><span style="font-size: 14px;font-weight:700;"> 卡片打开率计算方式</span></div>-->
<!--      <div class="explain">访客数 / 客户已收到带卡片的订单数 ≈ 卡片打开率</div>-->
<!--      <div class="explain">卡片链接的打开是第一步也是最重要的，所以务必关注</div>-->
<!--      <div class="explain">由于我们不知晓卖家们各自都发了多少单带卡片的货（并且客户都是已收货的），所以这个数据我们无法统计，各位卖家可以自己计算一下</div>-->
<!--      <div class="explain">卡片打开率的高低主要由以下等因素决定：</div>-->
<!--      <div class="explain">卡片界面设计(和产品类目相关最好)、卡片材质(PVC等好一点材质的效果更好)、卡片内容、激活链接的长短(链接越短，买家愿意输入的欲望越高一点，-->
<!--        如果链接太长可用链接缩短工具缩短一下，另外链接有语义的话也是会好一些的)、链接加个激活链接生成的二维码(虽然国外二维码扫码不太普及，但可以加一个备着，反正也不影响)</div>-->
<!--    </div>-->
    <div class="script_text">
      <el-row :gutter="15">
        <el-col :md="6" :sm="12">
          <div class="explain">访客数：扫码量</div>
          <div class="explain">激活成功用户数：注册成功</div>
          <div class="explain">激活异常用户数：1.) 运营不设置礼品 2.) 运营没有设置任何流程但用户扫码激活成功</div>
          <div class="explain">激活失败用户数：1.) 用户填写订单信息错误 2.) 易仓订单信息没有完全同步</div>
          <div class="explain">引导数：用户选择了礼品并点击下一步</div>
          <div class="explain">留好评数：根据运营设置跳转亚马逊星级来判定，并根据星级在系统上留下好评</div>
          <div class="explain">中差评数：用户选择1-3颗星并在系统上留评</div>
          <div class="explain">完成流程数：留完评论</div>
        </el-col>
        <el-col :md="6" :sm="12">
          <div>&nbsp;</div>
        </el-col>
        <el-col :md="6" :sm="12">
          <div class="explain">订单数：用户购买的订单数量</div>
          <div class="explain">邮件数：系统发送的邮件数量</div>
          <div class="explain">注册数：激活成功+激活异常</div>
          <div class="explain">激活率：（激活成功+激活异常）/ (激活成功+激活异常+激活失败)</div>
          <div class="explain">扫码注册率：注册数/扫码数</div>
          <div class="explain">引导率：引导留评数/注册数</div>
          <div class="explain">注册好评率：确认好评数/注册数</div>
          <div class="explain">系统留好评率：系统留好评数/注册数</div>
          <div class="explain">完成流程率：完成流程数/注册数</div>
        </el-col>
      </el-row>
    </div>
    <br/>
    <el-row :gutter="15">
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-data-line"></i>
              </el-tag>
            </div>
            <div style="float: right;">
              <div class="databoard-number-of-visitors" style="color: #000">激活率</div>
              <br/>
              <br/>
<!--              <div class="monitor-count-card-num" style="color: #666;font-weight: 700;font-size: 14px">昨日我的:50%</div>-->
              <div class="monitor-count-card-text ele-text-secondary" style="color: #666;font-weight: 700;font-size: 14px">昨日系统的:{{tabData.activate_rate_yesterday}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-position"></i>
              </el-tag>
            </div>
            <div style="float: right;">
              <div class="databoard-number-of-visitors" style="color: #000">引导率</div>
              <div class="monitor-count-card-num" style="color: #666;font-weight: 700;font-size: 14px">昨日我的:{{tabData.guide_rate_self_yesterday}}</div>
              <div class="monitor-count-card-text ele-text-secondary" style="color: #666;font-weight: 700;font-size: 14px">昨日系统的:{{tabData.guide_rate_yesterday}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-sell"></i>
              </el-tag>
            </div>
            <div style="float: right;">
              <div class="databoard-number-of-visitors" style="color: #000">系统留好评率</div>
              <div class="monitor-count-card-num" style="color: #666;font-weight: 700;font-size: 14px">昨日我的:{{tabData.favorable_comment_self}}</div>
              <div class="monitor-count-card-text ele-text-secondary" style="color: #666;font-weight: 700;font-size: 14px">昨日系统的:{{tabData.favorable_comment}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-sold-out"></i>
              </el-tag>
            </div>
            <div style="float: right;">
              <div class="databoard-number-of-visitors" style="color: #000">系统留中差评率</div>
              <div class="monitor-count-card-num" style="color: #666;font-weight: 700;font-size: 14px">昨日我的:{{tabData.bad_reviews_comment_self}}</div>
              <div class="monitor-count-card-text ele-text-secondary" style="color: #666;font-weight: 700;font-size: 14px">昨日系统的:{{tabData.bad_reviews_comment}}</div>
            </div>
          </div>
        </el-card>
      </el-col>


    </el-row>
    <el-row :gutter="15">
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-tickets"></i>
              </el-tag>
            </div>
            <div style="float: right;">
              <div class="databoard-number-of-visitors" style="color: #000">完成流程率</div>
              <div class="monitor-count-card-num" style="color: #666;font-weight: 700;font-size: 14px">昨日我的:{{tabData.success_progress_self}}</div>
              <div class="monitor-count-card-text ele-text-secondary" style="color: #666;font-weight: 700;font-size: 14px">昨日系统的:{{tabData.success_progress_yesterday}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <div>
            <div style="float: left">
              <el-tag size="large" class="ele-tag-round">
                <i class="el-icon-tickets"></i>
              </el-tag>
            </div>
            <div style="float: right;">
              <div class="databoard-number-of-visitors" style="color: #000">邮件打开率</div>
              <div class="monitor-count-card-num" style="color: #666;font-weight: 700;font-size: 14px">昨日我的:{{tabData.email_open_rate_self_yesterday}}</div>
              <div class="monitor-count-card-text ele-text-secondary" style="color: #666;font-weight: 700;font-size: 14px">昨日系统的:{{tabData.email_open_rate_yesterday}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <br/>
    <el-row :gutter="15">
      <el-col :lg="18" :md="16">
        <el-card
          shadow="never"
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitHourChart"
            style="height: 323px;"
            :option="visitHourChartOption"/>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardMonitor',
  components: {EleChart},
  data() {
    return {
      // 在线总人数倒计时
      updateTime: 5,
      // 当前时间
      currentTime: '20:58:22',
      // 在线人数动画数字组件实例
      onlineNumAnimIns: null,
      // 在线人数更新定时器
      onlineNumTimer: null,
      // 最近15天的访问情况
      visitHourData: [],
      tabData:[],
      xAxisData:[],//月份
      visitorsData:[],//访客数
      activateUser:[],//激活用户
      commentCount:[],//评论数量
    };
  },
  computed: {
    // 在线人数倒计时文字
    updateTimeText() {
      return this.updateTime + ' 秒后更新';
    },
    // 最近1小时访问情况折线图配置
    visitHourChartOption() {
      /*if (!this.visitHourData.length) {
        return {};
      }*/
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['访客数', '激活客户', '留评数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '访客数',
            type: 'line',
            stack: 'Total',
            data: this.visitorsData
          },
          {
            name: '激活客户',
            type: 'line',
            stack: 'Total',
            data: this.activateUser
          },
          {
            name: '留评数量',
            type: 'line',
            stack: 'Total',
            data: this.commentCount
          }
        ]
      }
    }
  },
  mounted() {
    this.doUpdateOnlineNum();
    //柱状图统计数据
    this.getVisitHourData();
    //tab统计数据
    this.getTabData();
  },
  methods: {
    /*获取tab对应的相关数据*/
    getTabData()
    {
      this.$http.get('/dataBoard/getTabData').then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.tabData = res.data.data;
          //赋值
          this.xAxisData = res.data.data.date_time;
          this.visitorsData = res.data.data.visitors_data;
          this.activateUser = res.data.data.activate_user;
          this.commentCount = res.data.data.comment_count;
        } else {
          this.$message({type:'error',message:res.data.msg,offset:160});
        }
      });
    },
    /* 在线人数更新倒计时 */
    doUpdateOnlineNum() {
      this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
      this.onlineNumTimer = setInterval(() => {
        this.currentTime = this.$util.toDateString(new Date(), 'HH:mm:ss');
        if (this.updateTime === 1) {
          this.updateTime = 5;
          if (this.onlineNumAnimIns) {
            this.onlineNumAnimIns.update(100 + Math.round(Math.random() * 900));
          }
        } else {
          this.updateTime--;
        }
      }, 1000);
    },
    /* 获取最近1小时访问情况数据 */
    getVisitHourData() {
      this.visitHourData = [
        {time: '16:00', visits: 15, views: 45},
        {time: '16:05', visits: 39, views: 169},
        {time: '16:10', visits: 152, views: 400},
        {time: '16:15', visits: 94, views: 285},
        {time: '16:20', visits: 102, views: 316},
        {time: '16:25', visits: 86, views: 148},
        {time: '16:30', visits: 39, views: 150},
        {time: '16:35', visits: 38, views: 234},
        {time: '16:40', visits: 95, views: 158},
        {time: '16:45', visits: 30, views: 100},
        {time: '16:50', visits: 86, views: 266}
      ];
    },
    activated() {
      [ 'visitHourChart'].forEach((name) => {
        this.$refs[name].resize();
      });
    }
  },
}
</script>

<style scoped>

.monitor-count-card ::v-deep .el-tag {
  border-color: transparent;
  font-size: 50px;
  height: 55px;
  width: 100px;
  margin-left: 20px;
  margin-top: 10px;
  background-color: white;

}
.databoard-number-of-visitors{
  color: #fff;
  font-size: 20px;
  font-weight:600
}

.monitor-count-card .monitor-count-card-num {
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  margin-top: 12px;
}

.monitor-count-card .monitor-count-card-text {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
  color: #fff;
}

.monitor-count-card .monitor-count-card-trend > i {
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
}

.card_1{
  background-image: url("/static/3607.a1767233.png");
  width: 375px;
}
.card_2{
  background-image: url("/static/3602.2773e7d3.png");
  width: 375px;
}
.card_3{
  background-image: url("/static/3604.f4ca7cb3.png");
  width: 375px;
}
.card_4{
  background-image: url("/static/3606.02c14d22.png");
  width: 375px;
}
.card_5{
  background-image: url("/static/3601.f96ce61b.png");
  width: 375px;
}

.script_text {
  background-color: #fff2e6;
  font-size: 14px;
  color: #ff7c00;
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  border: 1px solid #ffe1c4;
}

.explain {
  margin-top: 8px;
}


.monitor-face-cry > span {
  transform: rotate(45deg);
  bottom: -6px;
}


.monitor-progress-legends > div + div {
  margin-top: 8px;
}
</style>
